<template>
    <div>
        <div class="chooseTime">
            <div class="TiemList">
                <p style="margin-right: 8px;">开始时间:</p>
                <el-date-picker v-model="chooseDate" type="daterange" range-separator="至" size="mini"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
        <div class="chooseTime" style="height: 52px;">
            <p class="chooseTime-tips">监测时间 - 总量 ： {{ P1sizeOfS }}秒,{{ P1sizeOfH }}小时</p>
        </div>
        <div class="main" id="p2" ref="p2"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { debounce } from "@/utils/index";
import { statisticsP2 } from '@/api/statistics'
import { GetReportMockMonitor } from '@/api/mock'
export default {
    data() {
        return {
            p1Chart: '',
            chooseDate: '',
            option: {},
            P1sizeOfS: 0,
            P1sizeOfH: 0,
            chooseTime: []
        }
    },
    components: {

    },
    computed: {

    },
    watch: {
        chooseDate(newValue) {
            console.log(newValue)
            this.chooseTime = {
                startDate: newValue[0],
                endDate: newValue[1]
            }
            statisticsP2(this.chooseTime).then((res) => {
                this.p1Chart.clear()
                this.p1Chart.setOption(res.data.option, true);
            }).catch((err) => {
                console.log(err)
            })
        }
    },
    methods: {
        checkResize() {
            const el = this.$refs.p2; // 假设你有一个ref指向盒子元素  
            const width = el.offsetWidth;
            const height = el.offsetHeight;
            if (width !== this.previousWidth || height !== this.previousHeight) {
                this.previousWidth = width;
                this.previousHeight = height;
                console.log('盒子尺寸变化了:', { width, height })
                this.p1Chart.resize();
            }

        }
    },
    created() {
        GetReportMockMonitor().then((res) => {
            console.log(res)
            this.P1sizeOfS = res.data.sizeTotal
            this.P1sizeOfH = parseFloat((res.data.sizeTotal / 60 / 60).toFixed(2))
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', debounce(this.checkResize, 300));
    },
    mounted() {
        window.addEventListener('resize', debounce(this.checkResize, 300));
        var chartDom = document.getElementById('p2');
        this.p1Chart = echarts.init(chartDom, null, {
            renderer: 'svg'
        });
        this.p1Chart.clear()
        statisticsP2().then((res) => {
            this.p1Chart.setOption(res.data.option, true);
        }).catch((err) => {
            console.log(err)
        })

    },
}
</script>

<style scoped>
.main {
    width: 100%;
    height: 260px;
}

.chooseTime {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: space-between;
}

.TiemList {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.TiemList p {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 14px;
    color: #7f7f7f;
}

.chooseTime-tips {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 18px;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;

}
</style>
